<template>
  <div class="item3-container">
    <div class="item3-title">文本资料</div>
    <EasyScrollbar :barOption="colorSizeOption">
      <div class="item-list" id="wrapper">
        <div class="item" v-for="(item, index) in datas" :key="index" :style="{'backgroundColor': index % 2 === 1 ? '#3e2e50':'transparent'}">
          <div class="item-name">{{item.name}}</div>
          <div class="item-btns">
            <el-button type="success"  icon="el-icon-search" @click="seeDetail">查看</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(index,item.name)">删除</el-button>
          </div>
        </div>
      </div>
    </EasyScrollbar>
    <div class="file-upload">
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button size="small" type="primary">文件上传</el-button>
      </el-upload>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <span>确定删除<span style="color:#f30000">{{centerDialogContent}}</span>的文本资料</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
  @import '../../../../assets/less/file3';
</style>

<script>
export default {
  data () {
    return {
      colorSizeOption: {
        barColor: '#b36fff',
        barWidth: 3,
        railColor: '#15032a'
      },
      centerDialogVisible: false,
      operatedDataIndex: -1,
      centerDialogContent: '',
      fileList: [],
      datas: [
        {
          name: '景区概况1',
          text: '1234'
        },
        {
          name: '景区概况2',
          text: 'abce'
        },
        {
          name: '景区概况3',
          text: '1235'
        },
        {
          name: '景区概况4',
          text: '212as'
        }
      ]
    }
  },
  methods: {
    handleDelete (index, value) {
      this.centerDialogVisible = true
      this.operatedDataIndex = index
      this.centerDialogContent = value
    },
    confirmDelete () {
      this.centerDialogVisible = false
      this.datas.splice(this.operatedDataIndex, 1)
    },
    seeDetail () {
      console.log(123)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>
